<!-- <ion-header>
  <ion-navbar>
    <ion-title>滑动可操作列表</ion-title>
  </ion-navbar>
</ion-header> -->
<ion-content>


  <ion-slides #slider pager="true" autoplay="3000" class="sliders-height" (ionSlideWillChange)="onSlideChanged()">
    <ion-slide *ngFor="let slide of slides"
               class="slide-background"
               [ngStyle]="{'background-image': 'url(' + slide.imageUrl +')'}" 
               (click)="goToDetailPage($event, slide)">
      <div class="text-wrapper">
        <div class="slide-text">
          <h2 class="slide-title" [innerHTML]="slide.title"></h2><br>
          <p [innerHTML]="slide.description"></p>
        </div>
      </div>
    </ion-slide>
  </ion-slides>
  <div class="floating-buttons pop-in">
  </div>



  <ion-list>
    <ion-item-sliding *ngFor="let item of items" (click)="itemTapped($event, item)">
      <ion-item class="list-padding-left">
        <ion-thumbnail item-start>
          <img [src]="item.imageUrlSmall">
        </ion-thumbnail>
        <h2>{{item.title}}</h2>
        <p>{{item.place}} • {{item.date}}</p>
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="secondary" (click)="viewComments($event, item)">
        <ion-icon name="chatbubbles"></ion-icon>
        Comments
      </button>
        <button ion-button color="primary" (click)="viewPlayers($event, item)">
        <ion-icon name="contacts"></ion-icon>
        Players
      </button>
        <button ion-button color="danger" (click)="delete($event, item)">
        <ion-icon name="trash"></ion-icon>
        Delete
      </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>
